<template>
	<yb-popup :visible="visible" @hide="onhide">
		<view class="yb-flex padding-gap" :style="{
			'background-color': skinColor.color_bg_2,
			height: '240rpx'
		}">
			<text class="character-title" :style="{
				color: skinColor.color_3,
				'text-align': 'center',
				'font-size': '24rpx',
				'padding-top': '20rpx',
				'padding-bottom': '20rpx'
			}">相关用户</text>
			<yb-list type="scroll" custom-class="yb-flex-1" :empty="{
				text: '',
				show: list.length == 0,
				color: skinColor.color_gap_1,
				bgColor: skinColor.color_bg_2
			}">
				<yb-grid :gap="20" :data="list" :column="list.length > 4 ? 4 : list.length">
					<template v-for="(item, index) in list" :slot="index">
						<view class="yb-flex yb-align-center" @tap="app.$business.openDetail(item)">
							<yb-avatar size="105" :src="item.avatar"></yb-avatar>
							<yb-text custom-style="margin-top: 10rpx" :size="24" :lines="1" :color="skinColor.color_1" :value="item.name || '佚名'" />
						</view>
					</template>
				</yb-grid>
			</yb-list>
			<yb-safe-bottom></yb-safe-bottom>
		</view>
	</yb-popup>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return new Array
				}
			}
		},
		methods: {
			onhide () {
				this.$emit('update:visible', false)
			}
		}
	}
</script>

<style>
</style>